<template>
	<!-- 项目查看 -->
	<div class="ledgerView">
		<!-- 表单 -->
		<div class="formBox">
			<el-form :inline="true" :model="form" class="demo-form-inline d-flex">
				<el-form-item label="搜索">
					<el-input
						v-model="state.form.queryName"
						:placeholder="
							ledgerId == 2 ? '根据项目任务或合同名称搜索' : '请输入搜索内容'
						"
						maxlength="32"
					/>
				</el-form-item>
				<el-form-item label="招标项目类别">
					<el-select v-model="state.form.projectTypeId" placeholder="">
						<el-option label="全部" value="" />
						<el-option
							v-for="v in state.tenderType"
							:key="v.projectTypeId"
							:label="v.typeName"
							:value="v.projectTypeId"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="招标(比选方式)">
					<el-select v-model="state.form.tenderType" placeholder="">
						<el-option
							:label="v.label"
							:value="v.value"
							v-for="v in competitiveBiddingStatusOptions"
							:key="v.value"
						/>
					</el-select>
				</el-form-item>

				<el-form-item :label="ledgerId == 2 ? '合同时间范围' : '任务时间范围'">
					<el-date-picker
						v-model="state.form.time"
						type="daterange"
						range-separator="-"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						size="default"
						value-format="YYYY-MM-DD"
					/>
				</el-form-item>

				<el-button
					class="el_classbtn m-r10"
					color="#FF7B50"
					style="color: #fff"
					type="primary"
					@click="onQuery"
					>搜索</el-button
				>
				<el-button class="el_classbtn" style="" color="#F0F0F0" @click="onReset"
					>重置</el-button
				>

				<el-divider direction="vertical" />

				<el-button
					class="el_classbtn el_classderive button_edit"
					@click="handelDown"
				>
					<svg-icon icon-class="project-detail-icon-derive" class="icon" />
					一键导出</el-button
				>
			</el-form>
		</div>

		<!-- 表格 -->
		<public-table
			class="m-t20"
			:index="true"
			:page="state.page"
			border
			:tableData="state.tableData"
			:tableOption.sync="state.tableOption"
			@page-change="onPageChange"
		>
			<template #operation="scope">
				<el-button
					class="button_view"
					@click="toPath(scope.row, '查看')"
					type="primary"
					>查看</el-button
				>
			</template>
			<!-- 评判办法 -->
			<template #bidEvaluationType="scope">
				<span v-for="v in bidEvaluationTypeOptions" :key="v.value">
					<span v-if="scope.row.bidEvaluationType == v.value">{{
						v.label
					}}</span>
				</span>
			</template>
			<!-- 服务单位产生方法 -->
			<template #selectionType="scope">
				<span v-for="v in selectionTypeOptions" :key="v.value">
					<span v-if="scope.row.selectionType == v.value">{{ v.label }}</span>
				</span>
			</template>
			<!-- 项目类别 -->
			<template #projectType="scope">
				<!-- <span v-for="v in state.tenderType" :key="v.projectTypeId">
					 <span v-if="scope.row.projectTypeId == v.projectTypeId">{{
						v.typeName
					}}</span>
				</span> -->
				{{ scope.row.projectType }}
			</template>
		</public-table>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { ElForm, ElDatePicker, ElDivider, ElMessage } from "element-plus";
import { useStore } from "vuex";
import PublicTable from "@/components/PublicTable.vue";
import { ledgerApi } from "@/api/biddingProject";
import { useRoute } from "vue-router";
import {
	competitiveBiddingStatusOptions,
	selectionTypeOptions,
	bidEvaluationTypeOptions,
} from "@/common/dict/dictCollect";
import { fileControlApi } from "@/api/assets";
import { processApi } from "@/api/biddingProject";
import { exportExcelFilexls } from "@/common/utils/GlobalUtils.js";
import { getURLhandler } from "@/views/constructionProjectManage/static/utools.js";

const store = useStore();
const route = useRoute();
const ledgerId = getURLhandler(route.path).ledgerId;
const form = reactive({
	searchName: "",
});

const state = reactive({
	form: {
		queryName: "",
		projectTypeId: "",
		tenderType: "",
		startTime: "",
		endTime: "",
		time: "",
	},
	page: {
		total: 0,
		current: 1,
		size: 50,
	},
	tableOption: [],
	tableData: [],
	tableList: [],
	tenderType: store.state.common.tenderType,
});

/* 台账表头 */
const getConfigurationList = () => {
	ledgerApi.getConfigurationList(ledgerId || "1").then((res) => {
		if (res.code == 200) {
			state.tableOption = res.data.map((v) => {
				if (v.tableField == "selectionType") {
					v.slot = true;
				}
				if (v.tableField == "bidEvaluationType") {
					v.slot = true;
				}
				if (v.tableField == "projectType") {
					v.slot = true;
				}
				// if (v.tableField == 'projectId') {
				//     v.slot = true
				// }
				let sizeNum = 25;
				let len = v.tableHeader.length;
				return {
					label: v.tableHeader,
					prop: v.tableField,
					...v,
					minWidth: sizeNum * len,
				};
			});
			// console.log(state.tableOption);
			getProjectTaskLedgerVo();
		}
	});
};

const getProjectTaskLedgerVo = () => {
	ledgerApi
		.getProjectTaskLedgerVo({
			param: {
				...state.form,
				ledgerId: ledgerId || "1",
			},
			pageNum: state.page.current,
			pageSize: state.page.size,
		})
		.then((res) => {
			if (res.code == 200) {
				state.tableData = res.data.content;
				state.page.total = res.data.totalSize;
			}
		});
};

const handelDown = () => {
	fileControlApi
		.ledgerManagement({
			ledgerId: ledgerId || "1",
			...state.form,
		})
		.then((res) => {
			if (res) {
				exportExcelFilexls(res, "招标项目台账导出");
			}
		});
};

const onQuery = () => {
	getProjectTaskLedgerVo();
};

const onReset = () => {
	for (let key in state.form) {
		if (typeof state.form[key] === "string") {
			state.form[key] = "";
		}
		if (typeof state.form[key] === "number") {
			state.form[key] = 0;
		}
	}
	state.form.time = [];
	state.page.current = 1;
	state.page.size = 50;
	getProjectTaskLedgerVo();
};

const onPageChange = (e) => {
	state.page.current = e.page;
	state.page.size = e.limit;
	getProjectTaskLedgerVo();
};

const getTypeList = () => {
	if (store.state.common.tenderType.length === 0) {
		processApi.getTypeList().then((res) => {
			if (res.code == 200) {
				state.tenderType = res.data;
				store.commit("set_tenderType", res.data);
			}
		});
	} else {
		state.tenderType = store.state.common.tenderType;
	}
};

watch(
	() => state.form.time,
	(value) => {
		if (value) {
			state.form.startTime = value[0];
			state.form.endTime = value[1];
		}
	}
);

onMounted(() => {
	// getProjectTaskLedgerVo();
	getConfigurationList();
	getTypeList();
});
</script>
<style lang="scss" scoped>
.ledgerView {
	.formBox {
		position: relative;
		// .el-button {
		// 	margin-top: -15px;
		// }
		:deep(.el-input__wrapper) {
			height: 40px !important;
		}
	}

	// .el_classderive {
	// 	border: 1px solid #fc7018;
	// 	color: #fc7018;
	// 	background-color: #fff;
	// }

	.el-divider {
		vertical-align: sub;
		height: 30px;
		margin: 5px 15px;
	}
}

// :deep(.el-date-editor) {
// 	width: 200px;
// }
</style>
